<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2025/1/5
  Time: 9:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/plugins/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    <title>个人中心</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .right-column {
            display: grid;
            grid-template-rows: 1fr 1fr;
            gap: 10px;
            padding-right: 10px;  /* 确保右边间隔为10px */
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-control {
            width: 100%;
        }
        .rounded-circle {
            border-radius: 50%;
        }
        /* 修改框宽度 */
        .modal-content {
            width: 80%; /* 可根据需要调整宽度 */
        }
        body {
            /* 设置背景图，根据实际情况修改图片路径 */
            background-image: url('<%=request.getContextPath()%>/static/images/background/personalCenterBackground.png');
            background-size: cover; /* 使背景图覆盖整个元素 */
            background-repeat: no-repeat; /* 不重复平铺背景图 */
            background-position: center center; /* 背景图居中显示 */
        }
    </style>
    <script>

    </script>
</head>
<body>
<div class="row">
    <div class="col-2"></div>
    <div class="col-8">
        <div class="row mt-1">
            <div class="left-column col-2">
                <p><b><i>个人中心</i></b></p>
            </div>
            <div class="col-8">
                <div class="row">
                    <div class="col-1"></div>
                    <div class="col-10">
                        <div class="card shadow">
                            <h4 class="ml-1">个人信息</h4>
                            <div id="userInfo" class="text-center">
                                <div class="mx-auto border-bottom border-secondary mb-2" style="width: 95%;"></div>
                                <img src="<%=request.getContextPath()%>${sessionScope.user.profilePicture}" class="rounded-circle" id="avatar" width="100" height="100">
                                <div class="mx-auto border-bottom border-secondary mb-2" style="width: 95%;"></div>
                                <div class="row">
                                    <div class="col-4">
                                        <p class="ml-1">用户名：</p>
                                    </div>
                                    <p id="usernameDisplay"></p></div>
                                <div class="mx-auto border-bottom border-secondary mb-2" style="width: 95%;"></div>
                                <div class="row">
                                    <div class="col-4">
                                        <p class="ml-1">昵称：</p>
                                    </div>
                                    <p id="nicknameDisplay"></p>
                                </div>
                                <div class="mx-auto border-bottom border-secondary mb-2" style="width: 95%;"></div>
                                <div class="row">
                                    <div class="col-4">
                                        <p class="ml-1">邮箱：</p>
                                    </div>
                                    <p id="emailDisplay"></p>
                                </div>
                                <div class="mx-auto border-bottom border-secondary mb-2" style="width: 95%;"></div>
                                <div class="row">
                                    <div class="col-4">
                                        <p class="ml-1">密码：</p>
                                    </div>
                                    <p id="passwordDisplay"></p>
                                </div>
                            </div>
                        </div></div>
                    <div class="col-1"></div>
                </div>
            </div>
            <div class="right-column mt-1  col-2" style="height: 160px">
                <!-- 使用btn-sm类来调整按钮大小，并添加间隔 -->
<%--                <button data-toggle="modal" data-target="#exampleModal${user.userId}" class="btn btn-primary btn-sm" >修改信息</button>--%>
                <button class="btn btn-primary" data-toggle="modal" data-target="#uploadModal" >上传音乐</button>
                <button onclick="viewSongs()" class="btn btn-secondary btn-sm" >查看歌曲</button>
                <%--                加个注销按钮--%>
                <button class="btn btn-danger" onclick="logout()" >注销</button>
                <!-- 返回主页按钮 -->
                <a href="<%=request.getContextPath()%>/" class="btn btn-secondary footer-btn">返回主页</a>

            </div>
        </div>
        <!-- 修改框 -->
<%--        还未实现--%>
        <div class="modal fade" id="exampleModal${user.userId}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg"> <!-- 增加 modal-lg 来放大弹窗 -->
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">用户修改</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <form method="post" action="<%=request.getContextPath()%>/user/update" enctype="multipart/form-data">
                        <input type="hidden" name="userId" value="${user.userId}">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" class="form-control" id="username" name="username">
                            <small id="usernametips" class="form-text text-muted">请输入正确的用户名.</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">邮箱</label>
                            <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                            <small id="emailHelp" class="form-text text-muted">请输入正确的邮箱.</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">密码</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" name="password">
                            <small id="passwordHelp" class="form-text text-muted">请输入正确的密码.</small>
                        </div>
                        <div class="form-group">
                            <label for="fullName">昵称</label>
                            <input type="text" class="form-control" id="fullName" name="fullName">
                            <small id="full_name_tips" class="form-text text-muted">请输入您的昵称（非必填）.</small>
                        </div>
                        <button type="submit" class="btn btn-primary">保存修改</button>
                        <button type="reset" class="btn btn-secondary">重置</button>
                    </form>
                </div>
            </div>
        </div>
        <!-- 上传 -->
        <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="uploadModalLabel">上传音乐</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="<%=request.getContextPath()%>/song/uploadServlet" method="post" enctype="multipart/form-data">
                        <div class="modal-body">
                            <!-- 用户ID -->
                            <div class="form-group">
                                <label for="userId">上传人ID</label>
                                <input type="text" class="form-control" id="userId" name="userId" value="${user.userId}" readonly />
                            </div>

                            <!-- 歌名 -->
                            <div class="form-group">
                                <label for="songName">歌名</label>
                                <input type="text" class="form-control" id="songName" name="songName" required />
                            </div>

                            <!-- 描述 -->
                            <div class="form-group">
                                <label for="description">描述</label>
                                <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                            </div>

                            <!-- 分类ID -->
                            <div class="form-group">
                                <label for="categoryId">分类ID</label>
                                <select class="form-control" id="categoryId" name="categoryId">
                                    <option value="1">流行</option>
                                    <option value="2">摇滚</option>
                                    <option value="3">电子</option>
                                    <option value="4">经典</option>
                                </select>
                            </div>

                            <!-- 上传文件 -->
                            <div class="form-group">
                                <label for="musicFile">上传文件 (.mp3)</label>
                                <input type="file" class="form-control-file" id="musicFile" name="musicFile" accept=".mp3" required />
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">上传</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 查看歌曲模态框 -->
        <div class="modal fade" id="viewSongsModal" tabindex="-1" role="dialog" aria-labelledby="viewSongsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="viewSongsModalLabel">我的歌曲列表</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th scope="col">Song ID</th>
                                <th scope="col">歌曲名</th>
                                <th scope="col">描述</th>
                                <th scope="col">分类ID</th>
<%--                                下面加一列操作列--%>
                                <th scope="col">操作</th>
                            </tr>
                            </thead>
                            <tbody id="songsTableBody">
                            <!-- 歌曲数据将动态插入到这里 -->
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="col-2"></div>
</div>


<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
<script src="<%=request.getContextPath()%>/static/js/util.js"></script>
<script src="<%=request.getContextPath()%>/static/js/user/personalCenter.js"></script>

<script>
    // // 假设这里使用 jQuery 来发起后端请求获取用户信息
    // $.get("/user/personalCenter", function(data) {
    //     // 假设后端返回的 JSON 数据包含用户信息
    //     //第一个是头像，第二个是用户名，第三个是昵称，第四个是邮箱，第五个是密码，第六个是用户ID
    //     $("#avatar").attr("src", data.avatar);
    //     $("#usernameDisplay").text(data.username);
    //     $("#nicknameDisplay").text(data.fullName);
    //     $("#emailDisplay").text(data.email);
    //     $("#passwordDisplay").text(data.password);
    //     $("#userId").text(data.userId);
    // });
</script>
</body>
</html>
